<template>
	<view class="login">
		<view class="logo">
			<view class="logo-inner">
				<slot name="logo">
					<image src="../../static/logo2.png" mode="aspectFit"></image>
					<view class="title">{{ title }}</view>
				</slot>
			</view>
		</view>
		<view class="form">
			<view class="box">
				<view class="input-wrapper">
					<uni-easyinput prefixIcon="person" v-model="loginForm.account" placeholder="请输入您的用户名"  clearable>
					</uni-easyinput>
				</view>
				<view class="input-wrapper">
					<uni-easyinput prefixIcon="locked" type="password" v-model="loginForm.pass"
						placeholder="请输入您的密码" clearable>
					</uni-easyinput>
				</view>
				<view class="">
					<button type="default" size="mini" style="margin-bottom:10px;border:1px solid skyblue" :class="{disabled: loading}" :loading="loading"
						@click="toggle('center')" >{{msg}}</button>
				</view>
				<view class="">
					<button class="btn round gradient" :class="{disabled: loading}" :loading="loading"
						@click="handleLogin">{{ btnText }}</button>
				</view>
			</view>
		</view>
		<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popup" background-color="#fff">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view style="position:relative">
							<image :src="codeData.bgImg" style="width:300px;height:200px"></image>
							<image :src="codeData.blockImg" :style="{top:codeData.y+'px',left: sliderPosition + 'px'}" class="hkImage" ref="hkImage"></image>
							 <view v-if="jieguo==0" class="msg">验证失败</view>
							 <view v-if="jieguo==1" class="msg" style="background:#1D9B24">验证成功</view>
							</view>
							<view class="line">
							               <p style="line-height:40px;text-align:center;">拖动左边滑块完成上方拼图</p>
							               <span class="huakuai"
										     :style="{ left: sliderPosition + 'px' }"  
							                     @touchstart="startDrag"  
												  @touchmove="drag"  
												  @touchend="stopDrag"  
												  @touchcancel="stopDrag" >III</span>
							</view>
							<view>
								<button class="mini-btn" type="primary"
									@click="guanbi()" size="mini" style="margin-right:10px">关闭</button>
									<button class="mini-btn" type="default"
										@click="shuaxin()" size="mini">刷新</button>
							</view>
						</view>
					</uni-popup>
				</view>

		<view class="bottom">
			<slot name="bottom">山东朗进通信有限公司</slot>
		</view>

	</view>
</template>

<script>
	import {
		login,checkTnCode
	} from '@/api/common.js';
	import {
		loginCode
	} from '@/api/common.js';
	export default {
		data() {
			return {
				title: '售后维保系统',
				btnText: '登录',
				loading: false,
				loginForm: {
					account: '',
					pass: '',
					logincode:'',
					uuid:'',
				},
				type: 'center',
				    logincode:'',
				        msg:"点击按钮进行验证",
				      jieguo:2,
				codeData:{
					 bgImg:"",
					 blockImg:'',
				},
				sliderPosition: 0,
				dragging: false,
				targetPosition: 200, 
				isVerified: false, // 校验结果
			}
		},
		// 读取本地存储密码及账号
		onShow() {
			uni.getStorage({
				key: 'UserInfo',
				success: (e) => {
					console.log('读取结果：' + JSON.stringify(e))
					this.loginForm.account = e.data.account
					this.loginForm.pass = e.data.pass
				}
			})
		},
		methods: {
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
				this.getcode()
			},
			guanbi(){
			   this.$refs.popup.close()
			  },
			  shuaxin(){
				this.getcode()
								
			  },
			//获取图片、抠图
			getcode(){
			  this.sliderPosition=0
			  this.jieguo=2
			  this.msg="点击按钮进行验证"
			  loginCode().then(res => {
				  this.codeData = res
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			
			 resetSlider() {  
			      this.sliderPosition = 0;  
			      this.jieguo = 2;  
			    },  
			
			
			 startDrag(event) {  
			      this.dragging = true;  
			      this.startX = event.touches[0].pageX; 
			          event.stopPropagation();
				},  
			  
			    drag(event) {  
			      if (!this.dragging) return;  
			      let moveX = event.touches[0].pageX - this.startX; 
			      moveX = Math.max(0, Math.min(this.targetPosition, moveX));   
			      this.sliderPosition = moveX; // 更新滑块位置  
				  event.stopPropagation(); 
			    },  
			  
			    stopDrag() {  
			      this.dragging = false;  
			      this.verifyPosition();  
			    },  
			      // 校验位置
			      verifyPosition() {
			        this.jiaoyan(this.sliderPosition)
			      },
				      jiaoyan(a){
				        checkTnCode({
				          x:a,
				          uuid:this.codeData.uuid
				        })
				          .then(response => {
							  console.log(response)
				            if (response) {
				              this.jieguo = 1
				              this.msg="验证成功！"
				              this.logincode=response
				              setTimeout(() => {
				               this.$refs.popup.close()
				              }, 1000); 
				            }else{
				              this.jieguo=0
				              this.msg="验证失败！"
				              setTimeout(() => {
				               this.resetSlider();
				                this.msg="点击按钮进行验证"
				                this.getcode()
				              }, 1000); 
				            }
				          }).catch(err => {
				       console.log(err);
					   this.jieguo=0
					   this.msg="验证失败！"
					   setTimeout(() => {
					    this.resetSlider();
					     this.msg="点击按钮进行验证"
					     this.getcode()
					   }, 1000); 
				       uni.showToast({
				       	title: err,
				       	icon: 'none'
				       });
				        })
				      },
			
			handleLogin() {
				if (this.loading) return;
				if(this.jieguo==1){
				login({
					account: this.loginForm.account,
					pass: this.loginForm.pass,
					logincode:this.logincode,
					uuid:this.codeData.uuid,
				}).then(res => {
					console.log('登录结果：' + res)
					uni.setStorageSync('UserInfo', this.loginForm)
					uni.setStorageSync('token', res);
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log(err);
					 this.jieguo=2
					 this.msg="点击按钮进行验证"
					 if(err=='校验码不存在!'){
						 uni.showToast({
						 	title: '请点击按钮进行验证',
						 	icon: 'none'
						 });
					 }else{
						 uni.showToast({
						 	title: err,
						 	icon: 'none'
						 });
					 }
				})	
				}else{
					uni.showToast({
						title: '请点击按钮进行验证',
						icon: 'none'
					});
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.logo {
		@include flex(center);
		height: 35vh;
		background-color: $bg-color;

		.logo-inner {
			@include flex();
			flex-direction: column;

			image {
				width: 420upx;
				height: 160upx;
			}

			.title {
				margin-top: 1vh;
				font-size: 82upx;
				color: #fff;
			}
		}
	}

	.form {
		padding: 0 30rpx;
		height: 10vh;
		border-radius: 0 0 100rpx 100rpx;
		background-color: $bg-color;

		.box {
			padding: 60rpx 40rpx 30rpx;
			border-radius: 40rpx;
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.input-wrapper {
				@include flex(space-between);
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

		}
	}

	.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: 20rpx;
		color: $font-light;
		@include flex(center);
		flex-direction: column;
		font-size: 0.5rem;
	}

	.btn {
		padding: 0 40rpx;
		height: 80rpx;
		font-size: $font-df;
		box-sizing: border-box;
		overflow: visible;
		border: 0;
		text-decoration: none;
		transform: translate(0rpx, 0rpx);
		position: relative;
		@include flex(center);

		&::after {
			display: none;
		}

		&.disabled {
			opacity: 0.5;
		}
	}
	.round {
		border-radius: 5000rpx;
	}
	.gradient {
		background-color: $bg-color;
		background-image: $login-btn-bg-color;
		color: $login-btn-color;
	}
	.popup-content{
		padding:5px
	}
	
	 .hkImage{
	   position:absolute;left:0px;width:100px;height:100px;
	 }
	  .msg{
	    background:#D34E42;color:#fff;position: absolute;bottom:0;width:100%;padding:5px;box-sizing: border-box;
	  }
	.line{
	   width:100%;height:40px;background:#DFE1E2;border-radius: 20px;position: relative;margin:20px 0
	 }
	 .huakuai{
	   cursor:pointer;
		border-radius:50%;
		width:60px;height:60px;
		background:#F9F9F9;border:1px solid #DFE1E2;
		display:block;position: absolute;
		top:-15px;z-index: 1000;
		line-height:60px;
		text-align:center;
	 transition: transform 0.1s ease-out; 
	   will-change: transform; 
	   color:green;font-weight:700
	 }
</style>
